<template>
  <div class="box">
    <main>
      <div class="login_box">
        <div class="title">
          <i class="iconfont icon-youxiang1"></i> 邮箱登录
          <span class="switch_EN">Switch to English</span>
        </div>
        <div class="ipts">
          <el-form :model="loginForm" ref="loginRef" :rules="loginRules">
            <el-form-item prop="email">
              <el-input v-model="loginForm.email" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="loginForm.password"
                placeholder="密码"
              ></el-input>
            </el-form-item>
          </el-form>

          <div class="submit_btn" @click="submitFormData">确定</div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import userUtil from "@/utils/userUtil";
import api from '@/config/api'
import { sendPost, http } from '@/utils/http'
import Vue from "vue";
export default {
  data () {
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱'))
        }
      }, 100)
    }
    return {
      loginForm: {
        email: '',
        password: ''
      },
      // 登录表单校验规则
      loginRules: {
        email: [
          { required: true, message: '请输入正确的邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入正确的密码', trigger: 'blur' },
          { min: 6, max: 15, message: '密码输入不正确', trigger: 'blur' }
        ]
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例,将值传入fromPath
      vm.fromPath = from.path
    })
  },
  mounted() {
    //绑定事件
    window.addEventListener('keydown', this.keyDown);
  },
  methods: {
    // 回车登录方法
    keyDown (e) {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
        this.submitFormData();
      }
    },
    submitFormData () {
      var that = this
      this.$refs.loginRef.validate(valid => {
        if (!valid) {
          this.$msg.info('请检查登录信息!')
          return
        } else {
          // 通过校验，发送登录请求
          sendPost(api.login, {
            email: this.loginForm.email,
            password: this.loginForm.password
          }).then(res => {
            if (res.success == '1') {
              Vue.prototype.$msg.error(res.msg);
              return
            }

            if (res.success == '0') {
              this.$msg.success('登录成功!')

              userUtil.set(res.data)
              // 登陆后重定向到之前想要访问的页面
              // let fullPath = this.$route.query.redirect;
              let fullPath = sessionStorage.getItem('redirect');
              // let hostname = this.$route.query.hostname;
              let hostname = sessionStorage.getItem('hostname');
              console.log(hostname, fullPath);
              // console.log(fullPath);
              // console.log(hostname);
              if (hostname == location.hostname) {
                if (fullPath != '/StudentManage') {
                  // this.$router.push("/StudentManage")
                  console.log(1);
                  this.$router.push(fullPath)
                } else {
                  this.$router.push("/StudentManage")
                  console.log(2);

                }
                setTimeout(() => {
                  that.$router.go(0)
                }, 0)
              } else {
                console.log(3);
                this.$router.push("/StudentManage")
              }

            }
          })
        }
      })

    }
  }
}
</script>

<style lang="less" scoped>
.box {
  background-color: #fff;
}
main {
  height: 100%;
  width: 100%;
  // background-color: rgb(220, 216, 216);
  background-size: 100% 100%;
  // position: fixed;
  /deep/.el-button--primary {
    background-color: #ff5342;
    border-color: #ff5342;
  }
  .login_box {
    height: 360px;
    width: 500px;
    border-radius: 10px;
    // background-color: #fff;
    box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);
    padding: 0 130px;
    margin: auto;
    margin-top: 40px;
    position: relative;
    .title {
      font-size: 30px;
      font-weight: bold;
      height: 80px;
      line-height: 80px;
      color: #666;
      .iconfont {
        font-size: 30px;
      }
      // 切换语言
      .switch_EN {
        font-size: 12px;
        padding: 0 5px;
        display: inline-block;
        border-radius: 6px;
        cursor: pointer;
        border: 1px solid #eee;
        height: 30px;
        line-height: 30px;
        position: absolute;
        right: 10px;
        top: 28px;
      }
    }

    .ipts {
      margin-top: 40px;
      /deep/.el-input__inner {
        border: none;
        // outline: none !important;
        border-bottom: 1px solid #eee;
        text-align: center;
      }

      .submit_btn {
        font-size: 20px;
        height: 40px;
        line-height: 40px;
        width: 180px;
        margin: auto;
        margin-top: 60px;
        cursor: pointer;
        background-color: rgb(255, 76, 56);
        color: #fff;
        border-radius: 5px;
      }
    }
  }
}
</style>
